<template>
  <v-app class="app-con">
    <div class="app-con flexCon">
      <NavBar />
      <div ref="commonCon" class="flexFullCon">
        <router-view v-slot="{ Component }">
          <component :is="Component" />
        </router-view>
      </div>
      <TabBar />
    </div>
  </v-app>
</template>
<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import NavBar from "./layout/NavBar.vue";
import TabBar from "./layout/TabBar.vue";

import { useStore } from "vuex";
import { useRouter } from "vue-router";
import _ from "lodash";

const store = useStore();
const router = useRouter();
const state = reactive({
  network: false,
  meta: {},
  refHeight: 0,
});
const whitePaths = ["home", "my"];
const commonCon = ref(null);

onMounted(() => {
  // 检测断网
  window.addEventListener("offline", () => {
    console.log("已断网");
    state.network = true;
  });
  window.addEventListener("online", () => {
    console.log("网络已连接");
    state.network = false;
  });
});

watch(
  () => router.currentRoute.value,
  (val) => {
    state.meta = { ...val.meta, pathName: val.name };

    CheckContent();
  },
  { immediate: true, deep: true }
);

watch(
  () => store.state.systemMode,
  () => {
    CheckContent();
  },
  { immediate: true, deep: true }
);

watch(
  () => commonCon.value,
  (v) => {
    computedContent();
  }
);

onMounted(() => {
  CheckContent();
});

const reload = () => {
  window.location.reload();
};

function computedContent() {
  state.refHeight = 0;
  setTimeout(() => {
    let eleRef = commonCon?.value;
    let height = 0;
    if (eleRef) {
      height = eleRef.clientHeight;
      // if (state?.state?.systemMode == "pc") {
      //   height -= 78;
      // } else {
      //   height -= 46;
      // }
      state.refHeight = height;
    }
  }, 300);
}
function CheckContent() {
  console.log(state.meta);
  let ele = document.getElementsByClassName("content")[0];
  if (state?.meta?.fullHeight) {
    if (ele) ele.style.height = `100vh`;
    if (ele) ele.style.minHeight = `100vh`;
  } else if (whitePaths.includes(state?.meta?.pathName)) {
    if (ele) ele.style.height = `calc(100vh - 46px)`;
  } else {
    if (ele) {
      if (store?.state?.systemMode == "pc") {
        ele.style.height = `calc(100vh - 78px)`;
        ele.style.minHeight = `calc(100vh - 78px)`;
      } else {
        ele.style.height = `calc(100vh - 46px)`;
        ele.style.minHeight = `calc(100vh - 46px)`;
      }
    }
  }
}
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
#app {
  max-width: 750px;
  margin: 0 auto;
  box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
.app-con {
  transition: 0.3s;
  width: 100%;
  height: 100%;
}

.flexCon {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-image: url("./assets/common/background.png");
  background-repeat: no-repeat;
  background-size: 100%;
  .flexFullCon {
    flex: 1;
    overflow: auto;

    &::-webkit-scrollbar {
      width: 4px;
    }
  }
}
</style>
